import React, { Component } from 'react'


import axios from 'axios'


import { Link } from 'react-router-dom'
import { Grid, Button, Modal, Toast } from 'antd-mobile'


// import { BASE_URL, isAuth, removeToken, API } from '../../utils'

import styles from './index.module.css'


import { BASE_URL } from '../../utils/url'

import { isAuth, removeToken } from '../../utils/auth'


import { API } from '../../utils/api'











// 菜单数据
const menus = [
    { id: 1, name: '我的收藏', iconfont: 'icon-coll', to: '/favorate' },
    { id: 2, name: '我的出租', iconfont: 'icon-ind', to: '/rent' },
    { id: 3, name: '看房记录', iconfont: 'icon-record' },
    {
        id: 4,
        name: '成为房主',
        iconfont: 'icon-identity'
    },
    { id: 5, name: '个人资料', iconfont: 'icon-myinfo' },
    { id: 6, name: '联系我们', iconfont: 'icon-cust' }
]




// 默认头像
const DEFAULT_AVATAR = BASE_URL + '/img/profile/avatar.png'

const alert = Modal.alert






export default class MyIndex extends Component {
    constructor() {
        super()

        this.state = {
            isLogin: isAuth(),

            userInfo: {
                avatar: '',
                nickname: ''
            }
        }
    }


    componentDidMount() {
        this.getUserInfo()
    }



    //     ## 退出功能（★★★）

    // - 点击退出按钮，弹出对话框，提示是否确定退出
    // - 给退出按钮绑定点击事件，创建方法logout作为事件处理函数
    // - 导入Modal对话框组件（弹出模态框）

    logout = () => {





        Modal.alert('提示', '是否需要退出', [
            { text: '取消', onPress: () => console.log('cancel') },
            {
                text: '退出',
                onPress: () =>
                    new Promise((resolve) => {



                        Toast.info('正在退出中....', 1, async () => {
                            // /user/logout
                            let resLogout = await API.post('/user/logout')

                            console.log(resLogout)
                            if (resLogout.status == 200) {
                                removeToken()
                                this.setState({
                                    isLogin: false
                                })
                                // this.props.history.replace('/login')
                                // this.getUserInfo()  // 获取的是没有token 的 没有登录的页面
                            }

                        });

                        setTimeout(resolve, 1000);
                    }),
            },
        ])

    }




    // 登录判断获取用户信息 

    // - 判断是否登录（本地缓存中是否有token信息，直接调用isAuth() 方法即可，
    // 这里在utils/auth.js文件中已经封装好了）
    // - 如果登录了，就发送请求获取个人资料，并且在页面中展示个人资料
    // - 如果没有登录，则不获取个人资料，只在页面中展示未登录信息
    // - 在页面中展示登录或未登录信息，就要通过state变化来体现，因此，需要一个标示是否登录的状态


    async getUserInfo() {
        let { isLogin } = this.state


        if (!isLogin) {  // 没有登录


            Toast.fail('目前还没有登录 请先登录', 2, () => {
                // this.props.history.push('/login')    ??  
            });


            return false

        }

        // 登录了  
        //  http://e.ludir.cn:8081/user
        let result = await API.get("/user")


        //   console.log(result)



        //     data:
        // body:
        // avatar: "/img/avatar.png"
        // gender: "1"
        // id: 5
        // nickname: "好客_880495"
        // phone: null

        if (result.status == 200) {

            let { avatar, nickname, gender } = result.body

            console.log(avatar, nickname, gender)


            this.setState({
                userInfo: {
                    // avatar :+avatar,
                    avatar: BASE_URL + avatar,
                    nickname
                }
            })

        } else if (result.status == 400) {
            alert('token 过期了')

            this.setState({
                isLogin: false
            })

        }








    }






    render() {
        const { history } = this.props

        const {
            isLogin,
            userInfo: { avatar, nickname }
        } = this.state

        return (
            <div className={styles.root}>
                {/* 个人信息 */}
                <div className={styles.title}>
                    <img
                        className={styles.bg}
                        src={BASE_URL + '/img/profile/bg.png'}
                        alt="背景图"
                    />
                    <div className={styles.info}>
                        <div className={styles.myIcon}>
                            <img
                                className={styles.avatar}
                                src={avatar || DEFAULT_AVATAR}
                                alt="icon"
                            />
                        </div>
                        <div className={styles.user}>
                            <div className={styles.name}>{nickname || '游客'}</div>
                            {/* 登录后展示： */}
                            {isLogin ? (
                                <>
                                    <div className={styles.auth}>
                                        <span onClick={this.logout}>退出</span>
                                    </div>
                                    <div className={styles.edit}>
                                        编辑个人资料
                        <span className={styles.arrow}>
                                            <i className="iconfont icon-arrow" />
                                        </span>
                                    </div>
                                </>
                            ) : (
                                <div className={styles.edit}>
                                    <Button
                                        type="primary"
                                        size="small"
                                        inline
                                        onClick={() => history.push('/login')}
                                    >
                                        去登录
                      </Button>
                                </div>
                            )}

                            {/* 未登录展示： */}
                        </div>
                    </div>
                </div>

                {/* 九宫格菜单 */}
                <Grid
                    data={menus}
                    columnNum={3}
                    hasLine={false}
                    renderItem={item =>
                        item.to ? (
                            <Link to={item.to}>
                                <div className={styles.menuItem}>
                                    <i className={`iconfont ${item.iconfont}`} />
                                    <span>{item.name}</span>
                                </div>
                            </Link>
                        ) : (
                            <div className={styles.menuItem}>
                                <i className={`iconfont ${item.iconfont}`} />
                                <span>{item.name}</span>
                            </div>
                        )
                    }
                />

                {/* 加入我们 */}
                <div className={styles.ad}>
                    <img src={BASE_URL + '/img/profile/join.png'} alt="" />
                </div>
            </div>
        )
    }
}
